<template>
  <!--预约类订单详情页面-->
  <div class="yuyue">
    <wv-panel>
      <wv-media-box :thumb="appointment.coverImg | imgPathFilter" :title="appointment.goodsName" :description="'×1'"></wv-media-box>
    </wv-panel>
    <div class="divider"></div>
    <slot></slot>
    <div class="divider"></div>
    <ul class="address">
      <li><img src="../../../assets/clock.png" alt="" width="15">{{appointment.time}}</li>
      <li><span><img src="../../../assets/address.png" alt="" width="15"></span>
        <span>{{appointment.address}}</span>
      </li>
      <li v-if="appointment.appointmentState==1">预约状态：预约中</li>
      <li v-if="appointment.appointmentState==2">预约状态：预约成功</li>
      <li v-if="appointment.appointmentState==3">预约状态：预约失败</li>
    </ul>
    <div class="divider"></div>
    <p class="title">预约人员信息</p>
    <wv-group class="mymsg">
      <wv-cell title="航班日期" :value="appointment.flightDate"></wv-cell>
      <wv-cell title="起飞时间" :value="appointment.takeOffTime"></wv-cell>
      <wv-cell title="始发地" :value="appointment.originatingPlace"></wv-cell>
      <wv-cell title="到达地" :value="appointment.destinationPlace"></wv-cell>
      <wv-cell title="姓名" :value="appointment.userName"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==1" value="身份证"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==2" value="护照"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==3" value="港澳通行证"></wv-cell>
      <wv-cell title="证件类型" v-if="appointment.identityType==4" value="台胞证"></wv-cell>
      <wv-cell title="证件号码" :value="appointment.identityNo"></wv-cell>
      <wv-cell title="电话" :value="appointment.phone"></wv-cell>
    </wv-group>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getAppointmentOrderDetail} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'yuyuedetail',
    props: {},
    data() {
      return {
        isVisible: false,
        order: {},
        appointment: {},
        peerstaffList: []
      };
    },
    methods: {
      getAppointmentOrderDetailData(params) {
        getAppointmentOrderDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.appointment = res.object.appointment;
            this.peerstaffList = res.object.peerstaffList;
          }
        })
      }
    },
    created() {
      let appointmentId = this.$route.query.appointmentId;
      this.getAppointmentOrderDetailData({appointmentId: appointmentId});

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .divider{
    background-color: #eee;
    height: 10px;
  }
  .msg{
    padding: 10px;
    font-size: 13px;
    color: #666;
    line-height: 25px;
    text-align: left;
  }
  .address {
    background-color: #fff;
    padding: 10px;
    text-align: left;

    li {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;

      img {
        margin-right: 5px;
        vertical-align: text-bottom;

      }
    }

    li:nth-child(2) {
      display: flex;
      padding: 10px 0;
      height: auto;
      align-items: center;

      span:first-child {
        flex: 0 20px;

        img {
          vertical-align: top;
          padding-top: 5px;
        }
      }

      span:last-child {
        line-height: 22px;
      }
    }

    li:last-child {
      display: flex;
      border-bottom: none;

      span {
        flex: 1;
      }

      :first-child {
        color: #e96775;
      }
    }
  }

  .des {
    font-size: 18px;
    color: #111;
    text-align: left;
    padding: 10px;
  }

  .deslist {
    font-size: 13px;
    color: #666;
    text-align: left;
    padding: 0 10px 10px;
    line-height: 25px;
  }

  .title {
    font-size: 18px;
    color: #111;
    padding: 10px 10px 0;
    text-align: left;
  }

  .yuyue {
    padding-bottom: 50px;
  }

  .other {
    padding: 20px 0;

    p {
      color: #111;
    }

    .content p {
      padding-top: 20px;
    }
  }

  .shouqi {
    margin-top: 10px;
  }
</style>
